<!--
 * @Author: your name
 * @Date: 2021-10-12 11:13:01
 * @LastEditTime: 2021-10-19 10:54:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /a1902-a-group/admin_pc/src/views/List/index.vue
-->
<template>
  <div>
     <!-- <div @click="hanldeClick">{{name}}</div> -->
     <!-- {{nameObj}}
     {{nameArr}}
     {{newArr}} -->
     <!-- {{name}}
     {{age}} -->
     <!-- <MySetUp msg="哈喽" @jump="myJump">
        <h1>哈哈哈，我是slot</h1>
     </MySetUp> -->

     <!-- <TodoList></TodoList> -->
     <MyComputed></MyComputed>
  </div>
</template>

<script>
import MySetUp from '../../component/MySetUp.vue'
import TodoList from '../../component/TodoList.vue'
import MyComputed from '../../component/MyComputed.vue'
import {ref, reactive, readonly, toRefs, toRef} from 'vue'
export default {
    // methods: {
    //     test() {
    //         console.log(this.$options.setup())
    //     }
    // },
    // beforeCreate 初始化之前
    // setup 这个方法 定义的属性和方法 只要是ruturn出去的  外部 是可以拿到的
    // setup 是不能获取到 外部的属性和方法，因为没有this

    // ref 定义变量 基本类型的变量
    // setup() {

    //     // proxy 将我们的变量 ‘zxd’ 转化为 proxy({value: 'zxd'})
    //     let name = ref('zxd');

    //     const hanldeClick = () => {
    //         alert(123)
    //     }
        
    //     setTimeout(() => {
    //         name.value = '哈哈哈哈'
    //     }, 2000);

    //     return {
    //         name,
    //         hanldeClick
    //     }
    // }
    // created // 初始化之后
    components: {MySetUp, TodoList, MyComputed},
    methods: {
        myJump(value) {
            alert(value)
        }
    },
    setup() {
        // proxy 将我们的变量 ‘zxd’ 转化为 proxy({name: 'zxd'})
        let nameObj = reactive({name: 'zxd'})
        let nameArr = reactive([123])
        let newArr = readonly(nameArr);
        setTimeout(() => {
            nameObj.name = '哈哈哈哈'
            nameObj.age = 18
            // newArr[0] = 456
        }, 2000);

        // toRefs 解构数据的 并还存在 双向绑定功能 
        // toRef 动态的添加属性 （你要添加的那个变量， 你要添加的属性）
        let age = toRef(nameObj, 'age');
        return {
            nameObj,
            nameArr,
            newArr,
            name,
            age
        }
    }
}
</script>

<style>

</style>